<template>
  <div id="chart404" class="main-map-box" />
</template>

<script>
  import chinaJson from '@/assets/json/china.json'
  import * as echarts from 'echarts'
  export default {
    name: 'mapChart',
    components: {},
    data() {
      return {}
    },
    mounted() {
      this.initEchart()
    },
    methods: {
      initEchart(){

        // 所有点位的集合
        const coord =[
          { name: '北京', value: [116.41, 39.90], num: 200, size: 3 },
          { name: '天津', value: [117.20, 39.13], num: 80, size: 1 },
          { name: '河北', value: [114.48, 38.04], num: 100, size: 1 },
          { name: '山西', value: [112.55, 37.87], num: 100, size: 1 },
          { name: '内蒙古', value: [111.66, 40.82], num: 100, size: 1 },
          { name: '辽宁', value: [122.85, 41.62], num: 100, size: 1 },
          { name: '吉林', value: [125.32, 43.88], num: 100, size: 1 },
          { name: '黑龙江', value: [126.65, 45.75], num: 100, size: 1 },
          { name: '上海', value: [121.48, 31.22], num: 100, size: 1 },
          { name: '江苏', value: [118.76, 32.06], num: 100, size: 1 },
          { name: '安徽', value: [117.28, 31.86], num: 100, size: 1 },
          { name: '福建', value: [119.30, 26.08], num: 100, size: 1 },
          { name: '江西', value: [115.85, 28.68], num: 100, size: 1 },
          { name: '山东', value: [117.00, 36.67], num: 100, size: 1 },
          { name: '河南', value: [113.66, 34.75], num: 100, size: 1 },
          { name: '湖北', value: [114.29, 30.97], num: 100, size: 1 },
          { name: '湖南', value: [113.02, 28.19], num: 100, size: 1 },
          { name: '广东', value: [113.26, 23.14], num: 100, size: 1 },
          { name: '广西', value: [108.33, 22.82], num: 100, size: 1 },
          { name: '海南', value: [110.35, 20.00], num: 100, size: 1 },
          { name: '重庆', value: [106.55, 29.56], num: 100, size: 1 },
          { name: '四川', value: [104.07, 30.65], num: 100, size: 1 },
          { name: '贵州', value: [106.71, 26.84], num: 100, size: 1 },
          { name: '云南', value: [101.59, 24.47], num: 100, size: 2 },
          { name: '西藏', value: [91.12, 29.65], num: 100, size: 2 },
          { name: '陕西', value: [108.94, 34.27], num: 100, size: 2 },
          { name: '甘肃', value: [103.83, 36.06], num: 100, size: 2 },
          { name: '青海', value: [101.78, 36.62], num: 100, size: 2 },
          { name: '宁夏', value: [106.27, 38.47], num: 100, size: 2 },
          { name: '新疆', value: [87.62, 43.79], num: 300, size: 5 },
          { name: '香港', value: [114.17, 22.27], num: 100, size: 2 },
          { name: '澳门', value: [113.54, 22.19], num: 100, size: 2 },
          { name: '台湾', value: [121.509062, 25.044332], num: 100, size: 2 },
          { name: '浙江', value: [121.509062, 25.044332], num: 123, size: 2 }
        ]
        const end = [{ name: '浙江', value: [120.19, 30.26] }]

        const lines_coord = coord.map(item=>{
          return { coords: [item.value, [120.19, 30.26]], ...item }
        })
        echarts.registerMap("全国", chinaJson);
        var myChart = echarts.init(document.getElementById("chart404"));

        var img = "image://"
        var img2 = "image://"

        let planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

        let option = {
          tooltip: {
            trigger: 'item',
            // alwaysShowContent: true, //  是否一直显示
            // enterable: true, // 是否允许移入浮层
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
            backgroundColor: 'rgba(4,24,51,0)',
            borderColor: 'rgba(99, 173, 222,0)',
            borderWidth: 0,
            padding: [0, 0],
            textStyle: {
              color: '#fff'
            },
            formatter: (params)=> {
              const { data } = params
              let context = `
                    <div class="mapTip">
                        <div class="name">${data.name}大学生</div>
                        <div class="value">学生人数: <span>${data.value}</span>人</div>
                    </div>
              `
              return context
            }
          },
          geo: {
            map: "全国",
            aspectScale: 0.82, //长宽比
            zoom: 1.1,
            scaleLimit: {
              min: 1,
              max: 3,
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "red", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "red", // 100% 处的颜色
                    },
                  ],
                  globalCoord: true, // 缺省为 false
                },
                shadowColor: "#4ED4FF",//地图阴影
                shadowOffsetX: 1,
                shadowOffsetY: 22,
              },
            },
            emphasis: {
              itemStyle: {
                normal: {
                  // 鼠标移入时的样式
                  // 使用 symbol 属性定义显示的标记类型，例如使用内置的 'circle' 标记
                  symbol: 'circle',
                  // 可以设置更多的样式属性，如颜色、大小等
                  color: '#c23531',
                  borderWidth: 1,
                  borderColor: '#fff'
                }
              }
            }
          },
          series: [
            {
              type: "map",
              roam: false,

              label: {
                normal: {
                  show: true,
                  color: "#fff",
                  fontSize: 16,
                  fontFamily: 'YouSheBiaoTiHei'
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "#5BC6DE", //地图边框线
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#002A90", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#002A90", // 100% 处的颜色
                      },
                    ],
                    globalCoord: true, // 缺省为 false
                  },
                },
              },
              aspectScale: 0.82, //长宽比
              zoom: 1.1,
              map: "全国", //使用
              data: coord.map(item=>{
                return { name: item.name, value: item.num }
              })
            },
            {
              // effectScatter画散点【起点】
              type:'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              symbolSize:6,
              rippleEffect: {
                period: 3, brushType: 'stroke', scale: 3
              },
              itemStyle:{
                color:'#FFB800',
                opacity:0.7
              },
              tooltip: {
                show: false
              },
              data: coord
            },
            {
              // 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了
              type:'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              symbolSize:10,
              rippleEffect: {
                period: 4, brushType: 'stroke', scale: 4
              },
              itemStyle:{
                color:'#FF5722',
                opacity:1
              },
              tooltip: {
                show: false
              },
              data: end
            },
            {
              type: 'lines',
              zlevel: 1,
              effect: {
                show: true,
                period: 5,
                trailLength: 0.3,
                color: '#fff',
                symbolSize: 3,
                opacity: 0.4,
              },
              tooltip: {
                show: false
              },
              data: lines_coord.map(item=>{
                return {
                  coords: item.coords,
                  lineStyle: {
                    width: item.size,
                    curveness: 0.2, // 边的曲度, 支持从 0 到 1 的值，值越大曲度越大
                    color: '#E38247'
                  }
                }
              })
            },
          ],
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .main-map-box {
    width: 100%;
    height: 740px;
    text-align: center;
  }
  ::v-deep .mapTip {
    padding: 12px; text-align: left; min-width: 160px; min-height: 80px;
    background: linear-gradient( 180deg, rgba(255,128,51,0.52) 0%, rgba(128,53,7,0.93) 20%, #6C2900 33%, #521F00 49%, #6C2900 67%, rgba(255,128,51,0.52) 100%);
    border-image: linear-gradient(167deg, rgba(255, 226, 216, 0), rgba(255, 236, 231, 0.39)) 1 1;
    .name {
      font-size: 16px; font-family: PingFangSC; display: flex; align-items: center;
      &:before {
        content: ''; display: block; width: 14px; height: 14px; background: url('~@/assets/img/ico1.png');
        margin-right: 8px;
      }
    }
    .value {
      padding-top: 10px; font-size: 14px;
      span { font-size: 16px; font-family: PingFangSC; }
    }
  }
</style>
